<template>
  <div>
    <number-input
      v-model="goods.stock"
      label="库存"
      :prop="`${propName}.stock`"
      :rules="rules.stock"
      :step="1"
      :min="0"
      step-strictly
      append="件"
      hint="商品库存表示当前实际库存，设置的库存不影响实际销量库存"
    />
    <number-input
      v-model="goods.lowstock"
      label="库存预警"
      :prop="`${propName}.lowstock`"
      :rules="rules.lowstock"
      :step="1"
      :min="0"
      :max="goods.stock"
      step-strictly
      append="件"
      hint="商品库存少于预警数量，商品列表库存数量标红显示，0为不预警。"
    />
    <number-input
      v-model="goods.price"
      label="销售价"
      :prop="`${propName}.price`"
      :rules="rules.price"
      :precision="2"
      :step="0.01"
      :min="0"
      step-strictly
      append="元"
      hint="商品没有相关优惠活动的实际卖价"
    />
    <number-input
      v-model="goods.market_price"
      label="划线价"
      :prop="`${propName}.market_price`"
      :rules="rules.market_price"
      :precision="2"
      :step="0.01"
      :min="0"
      step-strictly
      append="元"
      hint="商品没有优惠活动显示的划线价格，如果商品有折扣等优惠活动划线价显示销售价"
    />
    <number-input
      v-model="goods.weight"
      label="重量"
      :prop="`${propName}.weight`"
      :rules="rules.weight"
      :precision="2"
      :step="0.01"
      :min="0"
      step-strictly
      append="kg"
    />
    <number-input
      v-model="goods.volume"
      label="体积"
      :prop="`${propName}.volume`"
      :rules="rules.volume"
      :precision="2"
      :step="0.01"
      :min="0"
      step-strictly
      append="m³"
    />
    <el-form-item
      label="商品编码"
      :prop="`${propName}.goods_no`"
      class="form-item--medium"
    >
      <el-input
        v-model="goods.goods_no"
        maxlength="32"
        show-word-limit
        placeholder="请输入商品编码"
      />
    </el-form-item>
    <number-input
      v-model="goods.min"
      label="起订量"
      :prop="`${propName}.min`"
      :rules="rules.min"
      :step="1"
      :min="0"
      step-strictly
      append="件"
      hint="0表示不限制最少订购数量"
    />
  </div>
</template>

<script>
import NumberInput from '@/components/Form/NumberInput'
export default {
  name: 'SkuItems',
  components: {
    NumberInput
  },
  props: {
    value: {
      type: Object,
      default: null
    },
    propName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        price: [{ required: true, message: '请设置商品价格', trigger: 'blur' }],
        stock: [{ required: true, message: '请设置商品库存', trigger: 'blur' }],
        lowstock: [{ required: true, message: '请设置商品库存', trigger: 'blur' }]
      }
    }
  },
  computed: {
    goods: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', ...val)
      }
    }
  }
}
</script>
